<template>
<!--企业申请-->
<div id="enterprise_application">
	<div class="container">
		<div class="title">{{ $lang('ENTERPRISE_ACCOUNT_APPLICATE') }}</div>
		<div v-if='show' class="e_top">
			<el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm clearfix">
			  <el-form-item :label="$lang('COMPANY_NAMES')" prop="Company_name">
			    <el-input :placeholder="$lang('PLACE_COMPANY')" v-model="ruleForm.Company_name" @change="getCOMPANY"></el-input>
			  </el-form-item>
			  <el-form-item  class="clearfix">
			  	<el-form-item :label="$lang('COUNTRY')">
			  		<el-select 
			  			filterable 
			  			clearable  
			  			v-model="ruleForm.Country" 
			  			:placeholder="$lang('CHOOSE')"
			  		>
				      <el-option v-for='(item,key) in countrys' :label="$i18n.locale == 'zh'?item.zhName:item.enName" :value="item.id">{{$i18n.locale == 'zh'?item.zhName:item.enName}}</el-option>
				    </el-select>
			  	</el-form-item>
			  	<el-form-item :label="$lang('AREA_PROVINCE')">
				    <el-input :placeholder="$lang('PLACE_AREA_PROINCE')" v-model="ruleForm.Province" value=""></el-input>
			  	</el-form-item>
			    <el-form-item :label="$lang('CITY')">
				    <el-input :placeholder="$lang('PLACE_CITY')" v-model="ruleForm.Citys" value=""></el-input>
			  	</el-form-item>
			  </el-form-item>

			  <el-form-item :label="$lang('COMPANY_ADDRESS')" prop="Company_address">
			    <el-input :placeholder="$lang('PLACE_ADDRESS')" v-model="ruleForm.Company_address" value=""></el-input>
			  </el-form-item>

              <el-form-item :label="$lang('WEBSITE')" prop="Corporate_website">
			    <el-input :placeholder="$lang('PLACE_WEBSITE')" v-model="ruleForm.Corporate_website"></el-input>
			  </el-form-item>
                
                <el-form-item :label="$lang('INDUSTRY')">
                    <el-select :placeholder="$lang('PLACE_INDUSTRY')" v-model="ruleForm.Industry" >
                        <el-option value="1" v-for="(item,key) in Industry" :label="$i18n.locale == 'zh'?item.zhName:item.enName" :value="item.id">{{$i18n.locale == 'zh'?item.zhName:item.enName}}</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label="$lang('BUSINESS_LINCENSE_NUM')" prop="Business_No">
                    <el-input :placeholder="$lang('PLACE_BUSINESS_')" v-model="ruleForm.Business_No"></el-input>
                </el-form-item>

                <el-form-item :label="$lang('Project')" prop="projectZhName">
                    <el-input v-if="$i18n.locale == 'zh'" :placeholder="$lang('PLACE_Project')" v-model="ruleForm.projectZhName"></el-input>
                    <el-input v-else :placeholder="$lang('PLACE_Project')" v-model="ruleForm.projectEnName"></el-input>
                </el-form-item>

                <el-form-item :label="$lang('Corporation')" prop="zhCorporation">
                    <el-input v-if="$i18n.locale == 'zh'" :placeholder="$lang('PLACE_Corporation')" v-model="ruleForm.zhCorporation"></el-input>
                    <el-input v-else :placeholder="$lang('PLACE_Corporation')" v-model="ruleForm.enCorporation"></el-input>
                </el-form-item>


                <el-form-item :label="$lang('THERR_SYNDROME')" prop="resource">
                    <el-radio-group v-model="ruleForm.Document" v-if="$i18n.locale == 'zh'">
                    <el-radio :label="true" :value="true">{{$lang('YES')}}</el-radio>
                    <el-radio :label="false" :value="false">{{$lang('NO')}}</el-radio>
                    </el-radio-group>
                    <span class="not_write" v-if="$i18n.locale == 'zh'" style="color:#81879D">({{ $lang('NOT_TO_FILL') }})</span>
                </el-form-item>


			  <el-form-item :label="$lang('BUSINESS_LINCENSE_NUM')" prop="resource" class="upload">
			    <div class="upload_box">
			    	<div class="clearfix">
			    		<div>
			    			<img src="../../assets/img/upload.png" alt="upload" />
			    			<img :src="BussinessLincenseSrc" class="upload_img" alt="" >
			    			{{$lang('Click_upload')}}
			    			<input 
			    				type="file" 
			    				accept=".png,.jpg" 
			    				value=""
			    				@change='uploadBusinessLicense($event)'
			    			/>
			    		</div>
			    		<div>
			    			<p>{{ $lang('EXAMPLE') }} :</p>
			    			<img src="../../assets/img/bussiness_license.png" alt="bussinessliences" />
			    			<p>1. {{ $lang('EXAMPLE_TYPE_LEFT') }}<span>{{ $lang('EXAMPLE_TYPE_CENTER') }}</span>{{ $lang('EXAMPLE_TYPE_RIGHT') }}</p>
			    			<p>2. {{ $lang('EXAMPLE_TIP') }}</p>
			    		</div>
			    	</div>
			    </div>
			  </el-form-item>
			  <el-form-item :label="$lang('DISCLAIMER_NAME')" prop="Person_name" class="principa_name">
			    <el-input :placeholder="$lang('PLACE_DISCLAIMER')" v-model="ruleForm.Person_name"></el-input>
			  </el-form-item>
			  <el-form-item :label="$lang('DISCLAIMER_PHONE')"  prop="Person_phone" class="principa_phone">
			    <el-input :placeholder="$lang('PLACE_DISCLAIMER_PHONE')" v-model="ruleForm.Person_phone" @change="getPRINCIPAL_PHONE"></el-input>
			  </el-form-item>
			  <el-form-item :label="$lang('IDCARD')" prop="Idcard" class="id_card">
			    <el-input :placeholder="$lang('PLACE_IDCARD')" v-model="ruleForm.Idcard"></el-input>
			  </el-form-item>
			  <el-form-item :label="$lang('EMAIL')" prop="Email" class="email clearfix">
			    <el-input :placeholder="$lang('PLACE_EMAIL')" v-model="ruleForm.Email" style="width:100% !important;"></el-input>
					<!-- <div class="vertifical">
						<input :placeholder="$lang('VERIFICTE_CODE')" type="text" id="" value="" style="color:#fff;" />
						<div>获取</div>
					</div> -->
			  </el-form-item>
              <el-form-item class="IDC">
                  <ul class="upload_positive">
                    <li>
                        <img :src="HandIdcardSrc" alt="" >
                        <p>{{ $lang('HANDDLE_ID_CARD') }}</p>
                        <input type="file" accept=".png,.jpg" value="" @change='uploadIdcard($event)' />
                    </li>
                    <li>
                        <img :src="PositiveIdcardSrc" alt="" >
                        <p>{{ $lang('UPLOAD_FRONT_VIEW') }}</p>
                        <input type="file" accept=".png,.jpg" value="" @change='uploadPostive($event)' />
                    </li>
                    <li>
                        <img :src="BackIdcardSrc" alt="" >
                        <p>{{ $lang('UPLOAD_DOCUEMENT_BACK') }}</p>
                        <input type="file" accept=".png,.jpg" value="" @change='uploadBack($event)' />
                    </li>
                </ul>
              </el-form-item>

			  <el-form-item class="tip IDC">
			  	<p>1. {{ $lang('EXAMPLE_TYPE_LEFT') }}<span>{{ $lang('EXAMPLE_TYPE_CENTER') }}</span>{{ $lang('EXAMPLE_TYPE_RIGHT') }} </p>
			  	<p>2. {{ $lang('TIP_IDCARD') }}</p>
                <!-- <p class="checkboxL"><el-checkbox style="width:26px;" v-model="DescriptionCK" @change="checkboxCK"></el-checkbox><span @click="showDialogVisible">{{ $lang('Description') }}</span></p> -->
			  </el-form-item>

			  <el-form-item>

			    <el-button type="primary" @click="submitForm('ruleForm')">{{ $lang('SUBMIT') }}</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<!-- <div v-if='show' class="division"></div> -->
		<div v-if='!show' class="e_bot">
			<img src="../../assets/img/submit_success.png" alt="$lang('Submit_successfully')" />
			<p>{{ $lang('SUBMIT_SUCCESS') }}</p>
			<p>{{ $lang('SUBMIT_SUCCESS_TIP') }}</p>
		</div>
	</div>
    <el-dialog
        :title="Resources.name"
        :visible.sync="centerDialogVisible"
        width="50%"
        class="My_dialog"
        :show-close="false"
        :close-on-click-modal="false"
        center>
        <div>{{Resources.description}}</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="DialogVisibleF">{{ $lang('Confirm') }}</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import rule from '@/utils/rules.js';
import { gets, uploadPost } from "@/api/api.js";
export default {
    created(){
        this.getIndustry()
        this.getCountry()
        this.getResources()
    },
    data() {
        let that = this
        var checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!value) {
                return callback(new Error(that.$lang('PLACE_EMAIL')))
            }
            if (mailReg.test(value)) {
                callback()
            } else {
                return callback(new Error(that.$lang('PLACE_EMAIL')))
            }
        }
        var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[34578]\d{9}$/
            if (!value) {
                return callback(new Error(that.$lang('PLACE_DISCLAIMER_PHONE')))
            }
            if (phoneReg.test(value)) {
                callback()
            } else {
                return callback(new Error(that.$lang('PLACE_DISCLAIMER_PHONE')))
            }
        }
        return {
            show:true,
            DescriptionCK:false,
            centerDialogVisible: false,
            countrys: null,
            Industry: [],
            Resources:{},
            ruleForm: {
                Company_name: '',
                Company_address: '',
                Corporate_website: '',
                Business_No: '',
                Country: '',
                Province: '',
                Citys: '',
                Document: '',
                Industry: '',
                Person_name: '',
                Person_phone: '',
                Idcard: '',
                Email: '',
            },
            rules: {
                Company_name: [
                    { required: true, message: that.$lang('PLACE_COMPANY'), trigger: 'blur' }
                ],
                Company_address: [
                    { required: true, message: that.$lang('PLACE_ADDRESS'), trigger: 'blur' }
                ],
                Corporate_website: [
                    { required: true, message: that.$lang('PLACE_WEBSITE'), trigger: 'blur' }
                ],
                Business_No: [
                    { required: true, message: that.$lang('PLACE_BUSINESS_'), trigger: 'blur' }
                ],
                Country: [
                    { required: true, message: that.$lang('PLACE_COUNTRY'), trigger: 'change' }
                ],
                Province: [
                    { required: true, message: that.$lang('PLACE_AREA_PROINCE'), trigger: 'change' }
                ],
                Citys: [
                    { required: true, message: that.$lang('PLACE_CITY'), trigger: 'change' }
                ],
                Person_name: [
                    { required: true, message: that.$lang('PLACE_DISCLAIMER'), trigger: 'blur' }
                ],
                Person_phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                Idcard: [
                    { required: true, message: that.$lang('PLACE_IDCARD'), trigger: 'blur' }
                ],
                Email: [
                    { validator: checkEmail, trigger: 'blur' }
                ],
                projectZhName: [
                    { required: true, message: that.$lang('PLACE_Project'), trigger: 'blur' }
                ],
                zhCorporation: [
                    { required: true, message: that.$lang('PLACE_Corporation'), trigger: 'blur' }
                ],
            },
            BussinessLincenseSrc: "", // 用户手动上传的营业执照图片地址
            BussinessLincenseFile: "", // 用户上传的营业执照图片图片信息
            HandIdcardSrc: "", // 用户上传的手持身份证图片地址
            HandIdcardFile: "", // 用户上传的手持身份证图片信息
            PositiveIdcardSrc: "", // 用户上传的证件正面照图片地址
            PositiveIdcardFile: "", // 用户上传的证件正面照图片信息
            BackIdcardSrc: "", // 用户上传的证件背面照图片地址
            BackIdcardFile: "", // 用户上传的证件背面照图片信息
        };
    },
    methods: {
        checkboxCK(value) {
            this.DescriptionCK = value
        },
        DialogVisibleF() {
            this.centerDialogVisible = false
        },
        showDialogVisible() {
            this.centerDialogVisible = true
        },
        submitForm(formName) {
            let that = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var param
                    if (that.$i18n.locale === 'zh') {
                        param = {
                            businessLicenseImg: that.BussinessLincenseFile,
                            IdCardFrontImg: that.PositiveIdcardFile,
                            IdCardBackImg: that.BackIdcardFile,
                            IdCardHandImg: that.HandIdcardFile,
                            zhName: that.ruleForm.Company_name,
                            projectZhName: that.ruleForm.projectZhName,
                            zhCorporation: that.ruleForm.zhCorporation,
                            zhAddress: that.ruleForm.Company_address,
                            website: that.ruleForm.Corporate_website,
                            mergeState: that.ruleForm.Document,
                            countryId: that.ruleForm.Country,
                            province: that.ruleForm.Province,
                            city: that.ruleForm.Citys,
                            industryId: that.ruleForm.Industry,
                            businessLicenseNo: that.ruleForm.Business_No,
                            principalName: that.ruleForm.Person_name,
                            principalPhone: that.ruleForm.Person_phone,
                            principalIdCardNo: that.ruleForm.Idcard,
                            principalEmail:that.ruleForm.Email
                        }
                    } else if (that.$i18n.locale === 'en') {
                        param = {
                            businessLicenseImg: that.BussinessLincenseFile,
                            IdCardFrontImg: that.PositiveIdcardFile,
                            IdCardBackImg: that.BackIdcardFile,
                            IdCardHandImg: that.HandIdcardFile,
                            enName: that.ruleForm.Company_name,
                            projectEnName: that.ruleForm.projectEnName,
                            enCorporation: that.ruleForm.enCorporation,
                            enAddress : that.ruleForm.Company_address,
                            website: that.ruleForm.Corporate_website,
                            mergeState: that.ruleForm.Document,
                            countryId: that.ruleForm.Country,
                            province: that.ruleForm.Province,
                            city: that.ruleForm.Citys,
                            industryId: that.ruleForm.Industry,
                            businessLicenseNo: that.ruleForm.Business_No,
                            principalName: that.ruleForm.Person_name,
                            principalPhone: that.ruleForm.Person_phone,
                            principalIdCardNo: that.ruleForm.Idcard,
                            principalEmail:that.ruleForm.Email
                        }
                    }
                    if (that.BussinessLincenseFile == '' || that.PositiveIdcardFile == '' || that.BackIdcardFile == '' || that.HandIdcardFile == '') {
                        that.$message({
                            message: that.$lang('photos_business'),
                            type: 'warning'
                        })
                    } else {
                        that.register(param)
                    }
                } else {
                console.log('error submit!!');
                return false;
                }
            });
        },
        async register(param) {
            let that = this
            try {
                let res = await uploadPost.searchCompanyList("/company/register.json", param);
                if (res.code == 'SUCCESS') {
                    that.show = !that.show
                } else {
                    if (that.$i18n.locale == 'zh') {
                        that.$message({
                            message: res.zhMsg,
                            type: 'warning'
                        })
                    } else if (that.$i18n.locale == 'en') {
                        that.$message({
                            message: res.enMsg,
                            type: 'warning'
                        })
                    }
                }
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        async getIndustry() {
            let that = this
            try {
                let res = await gets.searchCompanyList("/industry/find-all.json", {

                });
                that.Industry = res.listData
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        async getCOMPANY() {
            let that = this
            try {
                if (that.ruleForm.Company_name !== '') {
                    let res = await gets.searchCompanyList("/company/checkName.json", {
                        name: that.ruleForm.Company_name,
                        nameType: 'COMPANY'
                    });
                    if (res.data === true) {
                        if (that.$i18n.locale == 'zh') {
                            that.$message({
                                message: '账户已存在',
                                type: 'warning'
                            })
                        } else if (that.$i18n.locale == 'en') {
                            that.$message({
                                message: 'Account already exists',
                                type: 'warning'
                            })
                        }
                    }
                }
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        async getPRINCIPAL_PHONE() {
            let that = this
            try {
                if (that.ruleForm.Person_phone !== '') {
                    let res = await gets.searchCompanyList("/company/checkName.json", {
                        name: that.ruleForm.Person_phone,
                        nameType: 'PRINCIPAL_PHONE'
                    });
                    if (res.data === true) {
                        if (that.$i18n.locale == 'zh') {
                            that.$message({
                                message: '手机号已存在',
                                type: 'warning'
                            })
                        } else if (that.$i18n.locale == 'en') {
                            that.$message({
                                message: 'The phone number already exists',
                                type: 'warning'
                            })
                        }
                    }
                }
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        async getCountry() {
            let that = this
            try {
                let res = await gets.searchCompanyList("/country/find-all.json", {

                });
                that.countrys = res.listData
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        async getResources() {
            let that = this
            try {
                let res = await gets.searchCompanyList("/resources/find-resources-info", {

                });
                that.Resources = res.data
            } catch (e) {
                console.log(e)
                throw e;
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        uploadBusinessLicense(ev){ // 上传营业执照号
            this.BussinessLincenseSrc = URL.createObjectURL(ev.target.files[0]);
            this.BussinessLincenseFile = ev.target.files[0];
        },
        uploadIdcard(ev){
            this.HandIdcardSrc = URL.createObjectURL(ev.target.files[0]);
            this.HandIdcardFile = ev.target.files[0];
        },
        uploadPostive(ev){
            this.PositiveIdcardSrc = URL.createObjectURL(ev.target.files[0]);
            this.PositiveIdcardFile = ev.target.files[0];
        },
        uploadBack(ev){
            this.BackIdcardSrc = URL.createObjectURL(ev.target.files[0]);
            this.BackIdcardFile = ev.target.files[0];
        },
    }
}
</script>

<style lang="scss">
@import '~assets/scss/enterprise_application.scss';
.IDC{
    width: 100% !important;
    .el-form-item__content{
        margin-left: 0 !important;
        width: 100% !important;
    }
}
.My_dialog{
    .el-dialog{
        height: 60%;
        .el-dialog__body{
            height: 60%;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
.checkboxL{
    display: flex;
    justify-content: center;
    cursor: pointer;
}
</style>